<template>
  <el-table
    :data="tableData"
    border
    stripe
    style="width: 100%;margin: 20px">
    <el-table-column type="index" width="50" label="序号"></el-table-column>
    <el-table-column prop="borrowAmount" label="借款额度"></el-table-column>
    <el-table-column prop="integralStart" label="积分区间开始"></el-table-column>
    <el-table-column prop="integralEnd" label="积分区间结束"></el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import integralgradeApi from "@/api/integralgrade";

export default {
  data() {
    return {
      tableData: [],
    };
  },
   created() {
    this.initData();
  },
  methods: {
    initData() {
      integralgradeApi.getList().then((r) => {
        console.log(r);
        this.tableData = r.data.items;
      });
    },
    handleEdit(index, row) {
      this.$router.push(`/integral-grade/edit/${row.id}`);
    },
    handleDelete(index, row) {
      console.log(row.id)
      this.$confirm(
        `此操作将永久删除借款额度为:${row.borrowAmount}积分等级, 是否继续?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
        integralgradeApi.deleteById(row.id).then((r) => {
          this.$message.success("删除成功");
          this.initData();
        });
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除",
        });
      });
    }
  }
};
</script>
